import * as React from "react";
import { Row, Col, Card } from "antd";
import dianbiao from "../../../../../assets/img/dianbiaoshu.png";
import caijishebei from "../../../../../assets/img/caijishebei.png";
import shuibiao from "../../../../../assets/img/shuibiaoshu.png";
import { GridCardDataSouceClass } from "../../index";
export interface GridCardProps {
  dataSouce: GridCardDataSouceClass;
}

export interface GridCardState {}

class GridCard extends React.Component<GridCardProps, GridCardState> {
  render() {
    let { eleNum, waterNum, terminalNum } = this.props.dataSouce;
    return (
      <div className="GridCard">
        <Row style={{ marginLeft: -12, marginRight: -12, rowGap: 0 }}>
          <Col
            xs={24}
            sm={12}
            md={12}
            lg={12}
            xl={6}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Card bordered={false} className="card1">
              <div className="title">爱尔眼科能耗监测基本信息</div>
              <div className="body">
                <div className="qiu f-left"></div>
                <div className="text f-left">
                  <div className="h2">爱尔眼科</div>
                  <div className="txt">
                    地址：桐梓坡西路468号,建筑面积2526㎡
                  </div>
                </div>
                <div className="clear"></div>
              </div>
            </Card>
          </Col>
          <Col
            xs={24}
            sm={12}
            md={12}
            lg={12}
            xl={6}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Card bordered={false} className="card2">
              <div className="lImg  f-left">
                <img
                  src={dianbiao}
                  alt="电表"
                  width="150"
                  style={{ margin: "-16px 0" }}
                />
              </div>
              <div className="span f-left">
                <div className="title">电表数</div>
                <div className="body">{eleNum}</div>
              </div>
            </Card>
          </Col>
          <Col
            xs={24}
            sm={12}
            md={12}
            lg={12}
            xl={6}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Card bordered={false} className="card2">
              <div className="lImg  f-left">
                <img
                  src={shuibiao}
                  alt="水表"
                  width="150"
                  style={{ margin: "-16px 0" }}
                />
              </div>
              <div className="span f-left">
                <div className="title">水表数</div>
                <div className="body">{waterNum}</div>
              </div>
            </Card>
          </Col>
          <Col
            xs={24}
            sm={12}
            md={12}
            lg={12}
            xl={6}
            style={{ paddingLeft: 12, paddingRight: 12, marginBottom: 24 }}
          >
            <Card bordered={false} className="card2">
              <div className="lImg  f-left">
                <img
                  src={caijishebei}
                  alt="采集设备"
                  width="150"
                  style={{ margin: "-16px 0" }}
                />
              </div>
              <div className="span f-left">
                <div className="title">采集设备</div>
                <div className="body">{terminalNum}</div>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    );
  }
}

export default GridCard;
